<template>
  <el-container :style="{ minHeight: '100vh' }">
    <el-header ref="header" :class="'header-' + headerColor">
      <WelcomeUser />
    </el-header>
    <el-container>
      <el-aside :class="['aside-' + asideColor, 'aside-default']">
        <AsideMenu @view-change="handleViewChange" />
      </el-aside>
      <el-main :class="['main-' + mainColor]">
        <!-- 动态组件容器 -->
        <component
          :is="currentView.component"
          v-bind="currentView.props"
          :style="currentView.style"
        />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {ref, shallowRef, computed, onMounted} from 'vue';
import WelcomeUser from "@/components/Main/UserManger/WelcomeUser.vue";
import AsideMenu from "@/components/Main/AsideMenu.vue";
import ReportFormTable from "@/components/Main/ReportManagement/ReportFormTable.vue";
import ReportFormTableAdmin from "@/components/Main/ReportManagement/ReportFormTableAdmin.vue";
import NewReportFiledTableAdmin
  from "@/components/Main/NewReportManagement/ReportFiledAdmin/NewReportFiledTableAdmin.vue";
import CourseSelectionTable from "@/components/Main/CourseSelection/CourseSelectionTable.vue";
import CourseAdjustmentTable
  from "@/components/Main/TeachingAffairsManagement/CourseAdjustmentManagement/users/CourseAdjustmentTable.vue";
import CourseAdjustmentTableAdmin
  from "@/components/Main/TeachingAffairsManagement/CourseAdjustmentManagement/admins/CourseAdjustmentTableAdmin.vue";
import EmptyClassroomQuery
  from "@/components/Main/TeachingAffairsManagement/CourseAdjustmentManagement/users/EmptyClassroomQuery.vue";
import CourseManagementAdmin
  from "@/components/Main/TeachingAffairsManagement/CourseAdjustmentManagement/admins/CourseManagementAdmin.vue";
import WebIframe from "@/components/PublicTools/WebIframe.vue";
import ScoreStatisticsDownload from "@/components/Main/ScoreStatistics/ScoreStatisticsDownload.vue";
import OwnSchedule from "@/components/Main/TeachingAffairsManagement/CourseGet/OwnSchedule.vue";
import ReportItemPublic from "@/components/Main/NewReportManagement/ReportItemPublic/ReportItemPublic.vue";
import NewReportFiledTable from "@/components/Main/NewReportManagement/ReportFiled/NewReportFiledTable.vue";
import ReportItemAdmin from "@/components/Main/NewReportManagement/ReportItemAdmin/ReportItemAdmin.vue";
// 导入其他组件...

// 1. 组件映射表 - 集中管理所有可用视图
const componentMap = {
  ReportFormTable: {
    component: ReportFormTable,
    props: { tableType: '' }
  },
  ReportFormTableAdmin: {
    component: ReportFormTableAdmin,
    props: { tableType: '' }
  },
  NewReportFiledTableAdmin: {
    component: NewReportFiledTableAdmin,
    props: { tableType: '' }
  },
  CourseSelectionTable: {
    component: CourseSelectionTable,
    props: { tableType: '' }
  },
  CourseAdjustmentTable: {
    component: CourseAdjustmentTable,
    props: { tableType: '' }
  },
  CourseAdjustmentTableAdmin: {
    component: CourseAdjustmentTableAdmin,
    props: { tableType: '' }
  },
  EmptyClassroomQuery: {
    component: EmptyClassroomQuery
  },
  CourseManagementAdmin: {
    component: CourseManagementAdmin
  },
  WebIframe: {
    component: WebIframe,
    style: { height: '100%' }
  },
  ScoreStatisticsDownload: {
    component: ScoreStatisticsDownload
  },
  OwnSchedule: {
    component: OwnSchedule
  },
  ReportItemPublic: {
    component: ReportItemPublic
  },
  NewReportFiledTable: {
    component: NewReportFiledTable
  },
  ReportItemAdmin: {
    component: ReportItemAdmin
  }
};

// 2. 统一状态管理
const headerColor = 'blue';
const asideColor = 'green';
const mainColor = 'orange';

// 3. 当前视图状态（使用shallowRef优化性能）
const currentView = shallowRef({
  component: null,
  props: {},
  style: {}
});

// 4. 统一视图切换处理
const handleViewChange = (payload) => {
  const { view, ...viewProps } = payload;

  if (componentMap[view]) {
    currentView.value = {
      component: componentMap[view].component,
      props: { ...componentMap[view].props, ...viewProps },
      style: componentMap[view].style || {}
    };
  } else {
    console.warn(`Unknown view: ${view}`);
    currentView.value = { component: null, props: {}, style: {} };
  }
};

// 5. 初始化默认视图（可选）
onMounted(() => {
  // 设置默认视图，例如：
  // handleViewChange({ view: 'DefaultDashboard' });
});
</script>

<style scoped>
/* 原有样式保持不变 */
.header-blue {
  background-color: lightblue;
  width: 100%;
}

.aside-green {
  background-color: #f9faf9;
}

.main-orange {
  background-color: #f8f5f5;
}

.aside-default {
  width: 20%;
}
</style>